<template>
  <div class="system_dict_content">
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card shadow="hover" header="角色信息"
        :max-height="initHeight"
        :height="initHeight"
        >
          <el-table
          ref="singleTableRef"
          :data="treeData.data"
          highlight-current-row
          style="width: 100%"
          @current-change="handleCurrentChange"
          >
        <el-table-column type="index" width="30" label="#" />
        <el-table-column property="label" label="角色名称"/>
      </el-table>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card shadow="hover"  header="菜单权限">
          <div class="custom-tree-node-container">
            <el-tree
              ref="treeRef"
              :data="treeData.powerData"
              @check="checkChange"
              :props="{class:customNodeClass}"
              show-checkbox
              node-key="id"
              default-expand-all
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>

</template>

<script lang="ts" setup>
import { onMounted, reactive,computed ,ref} from 'vue'
import { ElTree } from 'element-plus'

import { success, confirm, error } from '/@/utils/msg'
import {rolesApi} from '/@/api/system/role'
import {menusApi} from '/@/api/system/menus'
import {powerApi} from '/@/api/system/power'

interface Tree {
  id:number
  label: string
  children?: Tree[]
}

const treeRef = ref<InstanceType<typeof ElTree>>()

const treeData = reactive({
  roleId : '',
  data :[],
  powerData:[]
})

const handleCurrentChange = async(val) => {
  const {code,data} = await powerApi().get_roles_rights(val.value)
  if (code == 0 || code == true) {
    let arrData = data.map((item)=>item.id)
    treeRef.value!.setCheckedKeys(arrData, false)
    treeData.roleId = val.value
  }
}

const loadTree = async()=>{
  const {code,data} = await rolesApi().load()
  treeData.data = data as Tree[]
}

onMounted(()=>{
  loadTree()
  initTableData()
})

const defaultProps = {
  children: 'children',
  label: 'label',
  id:'id'
}

const initHeight = computed(() => {
  return document.documentElement.clientHeight - 210
})

const formRef = ref()

// 加载列表
const dataList = async () => {
  return await menusApi().load_power_action()
}


// 初始化数据列表
const initTableData = async () => {
  const ds = await dataList()
  const { code,data } = { ...ds }
  treeData.powerData = data
}

const customNodeClass = (data, node) => {
  if (data.isPenultimate) {
    return 'is-penultimate'
  }
  return null
}

const checkChange = async(data,node)=>{
  if ( !treeData.roleId ) {
    error('请选择角色进行设置') 
    return false
  }
  const {code,msg} = await powerApi().set_roles_rights({roleId:treeData.roleId,id:data.id})
  if (code == 0 || code == true)  success(msg)
  else  error('设置失败')    
}


defineExpose({
  formRef
})

</script>

<style>
.system_dict_content{
  overflow: hidden;
}
.tree{
  overflow: auto;
}
.el-tree-node.is-expanded.is-penultimate > .el-tree-node__children {
  display: flex;
  flex-direction: row;
}

</style>